<template>
	<!--产品属性设置-->
	<view class="page-content">
		<view class="page-top">
			<view class="tip">提示：最多可设置3级，至少创建2级可使用。</view>
		</view>
		<!--列表-->
		<!-- 参数
		* @property {ObjectArray} list = [] 列表数据,自定义数据，会传递到name="rowContent"插槽  
		* @property {Boolean} feedbackGeneratorState = [true|false] 是否开启拖动触感反馈  
		* @property {Boolean} isLongTouch = [true|false] 是否开启长按拖动  
		* @property {Boolean} isAutoScroll = [true|false] 是否拖拽至边缘自动滚动列表  
		* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序 
		* @property {Number} listHeight = [] 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度 
		* @property {Number} rowHeight = [] 必填,行高,单位:px,默认44px
		* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}   
		* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}  
		* @event {Function} onclick 点击行触发事件 返回值:{index:'被点击行下标',value:'被点击行数据'} 
		*/ 
		-->
		<!-- 当前属性设置 isLongTouch关闭长按拖动 isAutoScroll开启自动滚动 feedbackGeneratorState开启触感反馈 rowHeight行高55 -->
		<view class="page-body">
			<w-dragSorts 
			@toClick="toClick" 
			@onClickAdd="onClickAdd" 
			@onClickEdit="onClickEdit"
			@onClickDel="onClickDel" 
			:list="pageobj.submenu" 
			:isLongTouch="false" :isAutoScroll="true" 
			:feedbackGeneratorState="true"  
			:rowHeight="55" 
			@change="change" 
			@confirm="confirm" 
			@onclick="onclick" >
				<template slot="rowContents" slot-scope="{ obj }">
					<view class="uni-collapse-content">
						<block v-for="(ite,ind) in obj.submenu" :key="ind">
							<!--二级-折叠内容-->
							<view class="uni-collapse-content-li" v-if="ite.type===1 && pageType==='pop'">
								<view class="uni-collapse-content-li-l2">
									<view class="item-li-l">
										<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{ite.name}}
										<view class="txt-l" v-if="pageType==='pop'">
											<text class="texture">{{ite.texture}}</text>
											<text class="size">({{ite.size===''?'尺寸待定':ite.size}})</text>
										</view>
										<view class="txt-l" v-if="pageType==='prop'">
											<text class="size2">{{ite.size}}</text>
										</view>
									</view>
									<!--按钮-选择-->
									<view class="item-li-r">
										<image class="icon-add" v-if="pageType==='pop' || pageType==='pro'"
											@click="onClickAdd2" :src="$mAssetsPath.icon_add3"></image>
										<image class="icon-bj" @click="onClickEdit2"
											:src="$mAssetsPath.icon_bianji"></image>
										<image class="icon-sc" @click="onClickDel2"
											:src="$mAssetsPath.icon_shanchu"></image>
									</view>
								</view>
					
								<block v-for="(it,i) in ite.submenu" :key="i">
									<view class="uni-collapse-content-li-li">
										<view class="item-li-l">
											<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{it.name}}
											<view class="txt-l" v-if="pageType==='pop'">
												<text class="texture">{{it.texture}}</text>
												<text class="size">({{it.size===''?'尺寸待定':it.size}})</text>
											</view>
											<view class="txt-l" v-if="pageType==='prop'">
												<text class="size2">{{it.size}}</text>
											</view>
										</view>
										<!--按钮-选择-->
										<view class="item-li-r">
											<image class="icon-bj" @click="onClickEdit2"
												:src="$mAssetsPath.icon_bianji"></image>
											<image class="icon-sc" @click="onClickDel2"
												:src="$mAssetsPath.icon_shanchu"></image>
										</view>
									</view>
								</block>
							</view>
							<!--一级-折叠内容-->
							<view class="uni-collapse-content-li" v-else-if="ite.type===2">
								<view class="uni-collapse-content-li-l">
									<view class="item-li-l">
										<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{ite.name}}
										<view class="txt-l" v-if="pageType==='pop'">
											<text class="texture">{{ite.texture}}</text>
											<text class="size">({{ite.size===''?'尺寸待定':ite.size}})</text>
										</view>
										<view class="txt-l" v-if="pageType==='prop'">
											<text class="size2">{{ite.size}}</text>
										</view>
									</view>
									<!--按钮-选择-->
									<view class="item-li-r">
										<image class="icon-add" v-if="pageType==='pop' || pageType==='pro'"
											@click="onClickAdd2" :src="$mAssetsPath.icon_add3"></image>
										<image class="icon-bj" @click="onClickEdit2"
											:src="$mAssetsPath.icon_bianji"></image>
										<image class="icon-sc" @click="onClickDel2"
											:src="$mAssetsPath.icon_shanchu"></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				</template>
			</w-dragSorts>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit" v-if="tipType===1 || tipType===2">{{tipType===1?'编辑':tipType===2?'新增':''}}</view>
				<view class="w-con">
					<view class="input-row" v-if="tipType===1 || tipType===2">
						<input class="input-row-w" type="text" v-model="inputVal" placeholder="请输入编辑内容"
							confirm-type="search" placeholder-style="color:#999"></input>
						<image class="icon-tb3" v-if="inputVal!=''" @click.stop="clear"
							:src="$mAssetsPath.icon_qingchu"></image>
					</view>
					<view class="txt-row" v-if="tipType===3">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
		<!--编辑框二-->
		<w-popup :show="showtip2" :type="type1" @change="change1">
			<view class="w-tip2">
				<view class="w-tit">{{navType===2?'编辑二级POP编码':navType===3?'编辑三级POP编码':''}}</view>
				<view class="w-con">
					
					<view class="input-row">
						<view class="input-row-t"><text class="required" v-if="required">*</text>名称：</view>
						<input class="input-row-w" type="text" v-model="params.name" placeholder="请输入名称"
							 placeholder-style="color:#999"></input>
					</view>
					<view class="input-row2">
						<view class="input-row-t"><text class="required" v-if="required" style="color: #fff;">*</text>规格：</view>
						<input class="input-row-w" type="text" v-model="params.sizew" placeholder="长度(cm)"
							 placeholder-style="color:#ddd;fontSize:11px"></input>
						<text class="input-row-x">x</text>
						<input class="input-row-w" type="text" v-model="params.sizeh" placeholder="宽度(cm)"
							 	 placeholder-style="color:#ddd;fontSize:11px"></input>
					</view>
					<view class="txt-row">备注:   规格非必填，若设置规格则下单时统一按该规格下单不可修改。</view>
					<view class="input-row3">
						<view class="input-row-t"><text class="required" v-if="required">*</text>材质：</view>
						<AppList :listData="appListData" @listChange="listChange"></AppList>
					</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import wDragSorts from "@/components/w-dragSorts/w-dragSorts3.vue"; //拖拽
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue"; //折叠面板
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item3.vue"; //折叠面板
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 弹窗
	import AppList from "@/components/w-dragList/AppList.vue" //
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		sendSmss,
		logins,
		registers,
	} from '@/common/api.js';
	import store from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	import loadMore from '@/components/uni-load-more/load-more.vue';
	export default {
		components: {
			wTit,
			loadMore,
			wDragSorts,
			uniCollapse,
			uniCollapseItem,
			AppList
		},
		data() {
			return {
				props: {
					label: 'name'
				},
				required: true,
				tipType: 0, // 1-编辑 2-新增 3-删除
				navType: 1, // 2-二级导航 3-三级导航
				showtip: false, //是否显示弹窗1
				showtip2: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				inputVal: '',

				appListData: [{
						appId: 1,
						appIcon: "cuIcon-evaluate",
						appName: "塑料",
						appLink: ""
					},
					{
						appId: 2,
						appIcon: "cuIcon-pay",
						appName: "黑胶玻璃贴",
						appLink: ""
					},
					{
						appId: 3,
						appIcon: "cuIcon-send",
						appName: "皮革",
						appLink: ""
					},
					{
						appId: 4,
						appIcon: "cuIcon-form",
						appName: "纸",
						appLink: ""
					},
					{
						appId: 5,
						appIcon: "cuIcon-pic",
						appName: "丝绸",
						appLink: ""
					},
					{
						appId: 6,
						appIcon: "cuIcon-cart",
						appName: "棉丝皮革纸",
						appLink: ""
					},
				],

				pageobj: {
					name: '单选',
					type: 'radio',
					submenu: [{
						name: "橱窗",
						id: 1,
						submenu: [{
								name: "玻璃贴",
								texture: '塑料',
								size: '500*340',
								id: 1,
								type: 1,
								submenu: [{
									id: 1,
									name: '玻璃贴左',
									texture: '塑料',
									size: '',
								}, {
									id: 2,
									name: '玻璃贴右',
									texture: '塑料',
									size: '',
								}]
							},
							{
								name: "休闲",
								texture: '塑料',
								size: '',
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								texture: '塑料',
								size: '500*340',
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								texture: '塑料',
								size: '500*340',
								id: 4,
								type: 2,
							}
						]
					}, {
						name: "VP",
						id: 2,
						submenu: [{
								name: "背景海报",
								texture: '塑料',
								size: '500*340',
								id: 1,
								type: 2,
							},
							{
								name: "休闲",
								texture: '塑料',
								size: '500*340',
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								texture: '塑料',
								size: '500*340',
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								texture: '塑料',
								size: '500*340',
								id: 4,
								type: 2,
							}
						]
					}, {
						name: "地杆",
						id: 3,
						submenu: [{
								name: "背景海报",
								texture: '塑料',
								size: '500*340',
								id: 1,
								type: 2,
							},
							{
								name: "休闲",
								texture: '塑料',
								size: '500*340',
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								texture: '塑料',
								size: '',
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								texture: '塑料',
								size: '',
								id: 4,
								type: 2,
							}
						]
					}, {
						name: "地杆",
						id: 4,
						submenu: [{
								name: "背景海报",
								texture: '塑料',
								size: '500*340',
								id: 1,
								type: 2,
							},
							{
								name: "休闲",
								texture: '塑料',
								size: '500*340',
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								texture: '塑料',
								size: '',
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								texture: '塑料',
								size: '',
								id: 4,
								type: 2,
							}
						]
					}]
				},
				params: {
					name: '',
					sizew: '',
					sizeh: '',
					texture: ''
				},
				formData: {
					page: 1,
					limt: 10
				},
				pageType: '', //pro-产品属性 pop-POP编码 prop-道具编码
			}
		},
		computed: {

		},
		onShow() {
		   this.getdata();	
		},
		onLoad(option) {
			console.log(222, option)
			if (option.pageType) {
				this.pageType = option.pageType;
				//pro-产品属性 pop-POP编码 prop-道具编码
				if (option.pageType === 'pro') {

				} else if (option.pageType === 'pop') {
					uni.setNavigationBarTitle({
						title: 'POP编码设置'
					})
				} else if (option.pageType === 'prop') {
					uni.setNavigationBarTitle({
						title: '道具编码'
					})
				}
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index == 0) {
				this.tipType = 2;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
			}
		},
		methods: {
			...mapActions('user', ['setToken']),
			//点击折叠框
			toClick(id,isOpen){
				if(this.pageobj.submenu && this.pageobj.submenu.length>0){
					this.pageobj.submenu.forEach(item =>{
						if(item.id===id){
							item.isOpen = isOpen;
						}
					})
				}
			},
			//初始化数据
			getdata() {
				if(this.pageobj.submenu && this.pageobj.submenu.length>0){
					this.pageobj.submenu.forEach(item =>{
						this.$set(item,'isOpen',false)
					})
				}
			},
			onclick(e){
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');
			},
			change(e){
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：',e.index);
				console.log('移动到：',e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e){
				console.log('=== confirm start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：',e.index);
				console.log('移动到：',e.moveTo);
				console.log('=== confirm end ===');
			},

			confirm() {

			},
			listChange(option) {
				console.log("listChange", option)
			},
			//下拉加载
			loadmore() {
				console.log('下拉加载');
				let _self = this;
				_self.load_sta = true;
				_self.formData.page++;
				_self.getdata(_self.formData);
			},
			
			//增加
			onClickAdd(id) {
				console.log(1, id)
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.navType = 2;

				} else if (this.pageType === 'prop') {
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.navType = 2;
				}
			},
			//编辑
			onClickEdit(id) {
				console.log(2, id)
				this.tipType = 1;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item.id === id) {
							this.inputVal = item.name;
						}
					})
				}
			},
			//删除
			onClickDel(id) {
				console.log(3, id)
				this.tipType = 3;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
			},
			//二级增加
			onClickAdd2() {
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.navType = 3;

				} else if (this.pageType === 'prop') {

				}
			},
			//二级编辑
			onClickEdit2() {
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {

				} else if (this.pageType === 'prop') {

				}
			},
			//二级删除
			onClickDel2() {

			},
			//折叠面板
			change(e) {

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//取消
			cancel() {
				this.show = false
				this.showtip = false
				this.showtip2 = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
					this.showtip2 = false;
				}
			},
			//清空
			clear() {
				this.inputVal = '';
			}
		}
	}
</script>

<style lang="scss">
	.row {
		.text {
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
		}
	}

	.required {
		color: #FE5252;
		font-size: 28rpx;
	}

	/* 提示窗口 */
	.w-tip2 {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
			border-top: 1rpx solid #f5f5f5;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			flex-direction: column;
			padding: 40rpx 40rpx;

			.input-row {
				display: flex;
				align-items: center;
				width: 100%;
				margin-bottom: 30rpx;

				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					text-align: left;
					color: $font-color-3;
					font-size: 28rpx;
					height: 52rpx;
					border: 1px solid #EEEEEE;
					border-radius: 6rpx;
				}

				.input-row-t {
					line-height: 52rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.txt-row {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: $font-color-r;
				margin-bottom: 20rpx;
			}

			.input-row2 {
				display: flex;
				align-items: center;
				width: 100%;
				margin-bottom: 10rpx;

				.input-row-w {
					display: flex;
					flex: 1;
					text-align: center;
					color: $font-color-3;
					font-size: 28rpx;
					height: 52rpx;
					border: 1px solid #EEEEEE;
					border-radius: 6rpx;
				}

				.input-row-x {
					color: $font-color-9;
					margin: 0 20rpx;
					line-height: 52rpx;
				}

				.input-row-t {
					line-height: 52rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.input-row3 {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-bottom: 10rpx;

				.input-row-t {
					line-height: 52rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.txt-l {
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		.texture {
			height: 30rpx;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 30rpx;
			color: #198FFF;
			border-radius: 4rpx;
			padding: 0 8rpx;
			background: #CBE6FF;
			margin-right: 20rpx;
		}

		.size {
			font-size: 24rpx;
			font-weight: 400;
			color: $font-color-9;
		}

		.size2 {
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
		}
	}

	.icon-add {
		width: 36rpx;
		height: 36rpx;
	}

	.icon-bj {
		margin-left: 30rpx;
		width: 34rpx;
		height: 34rpx;
	}

	.icon-sc {
		margin-left: 30rpx;
		width: 32rpx;
		height: 34rpx;
	}

	.uni-collapse-content {
		border-top: 1rpx solid #f5f5f5;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		font-weight: 400;
		color: $font-color-3;


		.uni-collapse-content-li {
			line-height: 100rpx;

			.uni-collapse-content-li-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 100rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.item-li-l {
					display: flex;
					align-items: center;

					.icon-l {
						margin-left: 90rpx;
						width: 20rpx;
						height: 40rpx;
						padding-bottom: 16rpx;
						margin-right: 16rpx;
					}
				}

				.item-li-r {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
				}
			}

			.uni-collapse-content-li-l {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #f5f5f5;

				.item-li-l {
					display: flex;
					align-items: center;

					.icon-l {
						margin-left: 60rpx;
						width: 20rpx;
						height: 40rpx;
						padding-bottom: 16rpx;
						margin-right: 16rpx;
					}
				}

				.item-li-r {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
				}
			}

			.uni-collapse-content-li-l2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.item-li-l {
					display: flex;
					align-items: center;

					.icon-l {
						margin-left: 60rpx;
						width: 20rpx;
						height: 40rpx;
						padding-bottom: 16rpx;
						margin-right: 16rpx;
					}
				}

				.item-li-r {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
				}
			}
		}
	}

	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}

			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;

				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}

				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.icon-tb {
		width: 36rpx;
		height: 36rpx;
		margin-left: 50rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		width: 100vw;
		height: calc(100% - 1rpx);
		border-top: 1rpx solid #f5f5f5;

		box-sizing: content-box;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden;

		.page-top {
			width: 100%;
			height: 80rpx;

			.tip {
				font-size: 28rpx;
				font-weight: 400;
				color: $font-color-3;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 30rpx;
				background: $uni-bg-color-grey;
			}
		}

		.page-body {
			height: calc(100% - 80rpx);
			display: flex;
			flex-direction: column;
			background: $uni-bg-color-grey;
		}
	}
</style>
